<template>
    <div class="selectbox" :style="{ width: width }" ref="selectbox">
        <span>Sort by</span>
        <div class="selectbox-input" @click="openSelect">
            <input v-model="checkLabel" type="text" :placeholder="placeholder" autocomplete="on" :disabled="!query" @input="doQuery" />
            <i class="iconfont icon-xia" :style="selectShow && 'transform: rotate(180deg);'"></i>
        </div>
        <div class="selectbox-dropmain" :class="
        selectShow ? 'selectbox-dropmain' : 'selectbox-dropmain drop-none'
      " :style="getStyle" ref="dropmain">
            <ul v-if="data.length > 0">
                <li v-for="(item, index) in data" :key="item[option.value] + '-' + index + new Date()" :class="{ active: value == item[option.value] }" @click="selectClick(item)">
                    {{ item[option.label] }}
                </li>
            </ul>
            <ul v-else>
                <p class="empty-str">{{ emptyStr }}</p>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: "ProductListSelect",
    props: {
        emptyStr: {
            type: String,
            default: "No content",
        },
        placeholder: {
            type: String,
            default: "Please select",
        },
        list: {
            type: Array,
            default: () => {
                return [];
            },
        },
        option: {
            type: Object,
            default: () => {
                return {
                    value: "value",
                    label: "label",
                };
            },
        },
        value: {
            default: "",
        },
        query: {
            type: Boolean,
            default: false,
        },
        width: {
            type: String,
            default: "200px",
        },
        height: {
            type: String,
            default: "260px",
        },
    },
    data () {
        return {
            selectShow: false,
            over: false,
            checkLabel: "",
            oldCheckLabel: "",
            regStr: "",
            data: this.list,
        };
    },
    watch: {
        list: {
            handler: function (v) {
                this.data = v;
                this.checkLabel = "";
            },
        },
    },
    computed: {
        getStyle () {
            let str = [];
            str.push("width:" + this.width);
            str.push("max-height:" + this.height);
            if (this.over) {
                str.push("bottom:36px");
            } else {
                str.push("top:36px");
            }
            str = str.join(";");
            return str;
        },
    },
    methods: {
        doRegExp (str) {
            let regExp = eval(str);
            let arr = [];
            this.list.map((i) => {
                if (regExp.test(i[this.option.label])) {
                    arr.push(i);
                }
            });
            this.data = arr;
        },
        doQuery () {
            this.selectShow = true;
            if (this.checkLabel.length > 0) {
                let str = "/";
                for (let i = 0; i < this.checkLabel.length; i++) {
                    str += this.checkLabel[i];
                }
                str += "/i";
                this.doRegExp(str);
            } else {
                this.data = this.list;
            }
        },
        // 打开下拉框
        openSelect () {
            this.selectShow = !this.selectShow;
            // 页面高度
            let maxbottom = document.documentElement.clientHeight;
            // 元素高度
            let bottom =
                this.$refs.selectbox.getBoundingClientRect().bottom +
                this.$refs.dropmain.clientHeight;
            if (maxbottom - bottom < 0) {
                this.over = true;
            } else {
                this.over = false;
            }
        },
        selectClick (item) {
            this.checkLabel = item[this.option.label];
            this.oldCheckLabel = item[this.option.label];
            this.$emit("input", item[this.option.value]);
            this.$emit("change", item[this.option.value]);
            this.selectShow = false;
        },
    },
    created () {
        if (process.client) {
            let item = this.list.find(
                (item) => item[this.option.value] == this.value
            );
            if (item) {
                this.selectClick(item);
            }
        }
    },
    beforeMount () {
        this._close = (e) => {
            // 如果点击发生在当前组件内部，则不处理
            if (this.$refs.selectbox.contains(e.target)) {
                return;
            }
            this.selectShow = false;
        };
        document.body.addEventListener("click", this._close);
    },
    beforeDestroy () {
        document.body.removeEventListener("click", this._close);
    },
};
</script>
<style lang="scss" scoped>
.drop-none {
    visibility: hidden;
}
.item-none {
    display: none;
}
.selectbox {
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    & > span {
        pointer-events: none;
        position: absolute;
        right: 100%;
        margin-right: 10px;
        line-height: 32px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
    }
    .selectbox-dropmain {
        overflow-y: auto;
        position: absolute;
        left: 0;
        background: #ffffff;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
        border-radius: 6px;
        border: 1px solid #d9d9d9;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        ul li {
            line-height: 30px;
            padding: 0px 14px;
            height: 30px;
            box-sizing: border-box;
            font-size: 14px;
            color: #000000;
            &.active {
                color: #c94175;
                background: #eee;
            }
            &:hover {
                color: #ea4c89;
                background: #eee;
            }
        }
    }
    .selectbox-input {
        height: 32px;
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #d9d9d9;
        padding: 0 12px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        input {
            width: 100%;
            border: none;
            outline: 0;
            height: 16px;
            padding: 0;
            font-size: 14px;
            color: #000000;
        }
        input:disabled {
            background: transparent;
        }
        i {
            margin-left: 4px;
            font-size: 12px;
            transition: transform 0.2s;
        }
    }
    .selectbox-input {
        &:hover,
        &:focus {
            border: 1px solid #ea4c89;
            // outline: 1px solid #ea4c89;
        }
    }
}
.empty-str {
    margin: 8px 10px;
    color: #000000;
    font-size: 14px;
}
</style>
